<template>
    <div class="comments">
        <div class="header">
            <div class="breadcrumb">
                <router-link :to="{ path: '/' }">
                    <span style="font-weight: normal">首页</span></router-link
                >
                <a-icon class="icon-right" type="right"/>
                <span><a>我的</a></span
                >
                <a-icon class="icon-right" type="right"/>
                <span><a>签字验收</a></span>
            </div>
        </div>
        <div class="sign">
            <sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value"/>
            <div class="btnList" ref="btnList">
                <a-button style="margin-left: 10px" type="danger" size="middle" @click="clearSignImg">清空</a-button>
                <a-button style="margin-left: 10px"type="primary" size="middle" class="ml30 mr30" @click="saveSignImg">保存</a-button>
                <a-button style="margin-left: 10px" type="primary" size="middle" @click="back">返回</a-button>
            </div>
        </div>
    </div>
</template>

<script>
    //接口引入
    export default {
        name: "signDialog",
        data() {
            return {
                value: null,
                //配置
                options: {
                    lastWriteSpeed: 1, //书写速度 [Number] 可选
                    lastWriteWidth: 2, //下笔的宽度 [Number] 可选
                    lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
                    lineJoin: "round", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
                    canvasWidth: "750", //canvas宽高 [Number] 可选
                    canvasHeight: "500", //高度  [Number] 可选
                    isShowBorder: true, //是否显示边框 [可选]
                    bgColor: "#fcc", //背景色 [String] 可选
                    borderWidth: 1, // 网格线宽度  [Number] 可选
                    borderColor: "#101010", //网格颜色  [String] 可选
                    writeWidth: 5, //基础轨迹宽度  [Number] 可选
                    maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
                    minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
                    writeColor: "#101010", // 轨迹颜色  [String] 可选
                    isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
                    imgType: "png", //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
                },
            };
        },
        created() {

        },
        mounted() {
            let windowHeight = document.documentElement.clientHeight;
            let btnList = this.$refs.btnList.offsetHeight;
            let windowWidth = document.documentElement.clientWidth;
            this.options.canvasWidth = 800;
            this.options.canvasHeight = 400;
        },
        methods: {
            //清除画板
            clearSignImg() {
                this.$refs.SignCanvas.canvasClear();
            },
            // 保存图片
            saveSignImg() {
                console.log(this.value, "value");
                if (this.value == null) {
                    alert("请签名")
                } else {
                    const file = this.value; // 把整个base64给file
                    const time = (new Date()).valueOf(); //生成时间戳
                    const name = time + ".png"; // 定义文件名字（例如：abc.png ， cover.png）
                    const conversions = this.dataURLtoFile(file, name); // 调用base64转图片方法
                    const data = new FormData();
                    console.log("conversions========", conversions)
                    data.append('file', conversions);
                    const options = {
                        method: "POST", //请求方法
                        body: data, //请求体
                        headers: {
                            'Accept': 'application/json'
                        },
                    };
                    fetch("http://localhost:9000/upload/avatar/admin", options) //上传照片
                        .then((response) => {
                        })
                        .then((responseText) => {
                        })
                        .catch((error) => {
                        })
                }
            },


            //base64转文件
            dataURLtoFile(dataurl, filename) {
                let arr = dataurl.split(',');
                let mime = arr[0].match(/:(.*?);/)[1];
                let bstr = atob(arr[1]);
                let n = bstr.length;
                let u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                return new File([u8arr], filename, {
                    type: mime
                })
            },
            back() {
                this.$router.back(-1);
            },
            // 签名
            signShipmentsContractFun(img) {
                let params = {
                    contractId: this.$route.query.contractId,
                    carrierContractPicture: img,
                    contractInfoDto: JSON.parse(this.$route.query.contractList),
                };
            },
        },
    };
</script>

<style lang="less" scoped>
    @import url("./style/comments.less");
    .btnList {
        position: fixed;
        left: 0;
        width: 100%;
        padding: 30px 0;
        display: flex;
        justify-content: center;
    }

    .sign-canvas {
        display: block;
        margin: 0 auto;
        background: #F1F1F1 !important;
        border-radius: 8px;
    }
</style>
